<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input v-model="username" placeholder="请输入用户名"></el-input>
      </el-col>
      <el-col :span="4">
        <el-input v-model="username" placeholder="请输入用户名" size="medium" disabled></el-input>
      </el-col>
      <el-col :span="4">
        <el-input v-model="username" placeholder="请输入用户名" size="small" clearable></el-input>
      </el-col>
      <el-col :span="4">
        <el-input v-model="password" placeholder="请输入密码" size="mini" show-password></el-input>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="datetime" ></el-input>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="请选择内容" prefix-icon="el-icon-search" v-model="search" ></el-input>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input type="textarea" placeholder="请输入备注" v-model="remark" :rows="4" maxlength="10" show-word-limit ></el-input>
      </el-col>
      <el-col :span="4">
        <el-input type="textarea" placeholder="请输入备注" v-model="remark" autosize ></el-input>
      </el-col>
      <el-col :span="4">
        <el-input type="textarea" placeholder="请输入备注" v-model="remark" :autosize="{minRows:2,maxRows:4}" ></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-autocomplete
            v-model="state1"
            :fetch-suggestions="querySearch"
            placeholder="请输入店家"
            @select="handleSelect"
        ></el-autocomplete>
      </el-col>
      <el-col :span="6">
        <el-autocomplete
            v-model="state2"
            :fetch-suggestions="querySearch"
            placeholder="请输入店家"
            :trigger-on-focus="false"
            @select="handleSelect"
        ></el-autocomplete>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username:'',
      password:'',
      datetime:'',
      search:'',
      remark:'',
      input1:'',
      select:'',
      restaurants: [],
      state1: '',
      state2: ''
    };
  },
  methods: {
    querySearch(queryString, cb) {
      let restaurants = this.restaurants;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        {"value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号"},
        {"value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号"},
        {"value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113"},
        {"value": "泷千家(天山西路店)", "address": "天山西路438号"},
        {"value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101"}
      ]
    },
    handleSelect(item) {
      console.log(item);
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  }

}
</script>

<style scoped>
.el-row{
  margin-top: 20px;
}
.el-select{
  width: 100px;
}
</style>